<template>
	<view>
    <!-- input事件 value发生改变时触发 -->
    <!-- 搜索框结构 -->
		<uni-search-bar  :focus="true" @input="input" cancelButton="none" :radius="100"></uni-search-bar>
    <!-- 搜索建议列表 -->
    <view class="suggestion-list" v-if="searchList.length!==0">
      <!-- 搜索建议的每一个item项 -->
      <view class="suggestion-item" v-for="(item, index) in searchList" :key="index" @click="gotoDetail(item)">
        <view class="goods-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    
    <!-- 搜索历史 结构 -->
    <view class="history-box" v-else>
      <!-- 标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <!-- 删除的 小图标 -->
        <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
      </view>
      <!-- 列表区域 -->
     <view class="history-list">
        <uni-tag :text="item" v-for="(item, index) in historyList" :key="index" @click="gotoGoodsList(item)">{{item}}</uni-tag>
     </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
        searchList: [], // 搜索建议 的数据列表
        historyList: [] // 搜索历史 的数据列表
			};
		},
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('HISTORY') || '[]')
    },
    methods:{
      input(e){
        // console.log(e.value)
        clearTimeout(this.timer)
       this.timer = setTimeout(()=>{
         if(e.value===''){ // input搜索框 内容为 空，没有关键字
           this.searchList = []
         }else{
           this.getSearchList(e.value) // 根据关键字获取搜索结果
         }
       },500)
      },
      
      // 获取 搜索建议
      async getSearchList(value) {
       const { data } = await uni.$http.get('/api/public/v1/goods/qsearch',{query:value})
       if(data.meta.status!==200) return uni.$showMsg()
       this.searchList=data.message
        // 历史记录
       this.historyList.unshift(value) // 将最新的关键字 添加到 历史记录面板
       this.historyList = Array.from(new Set(this.historyList)) // 去重
       uni.setStorageSync('HISTORY',JSON.stringify(this.historyList)) // 将历史记录 进行本地储存，在onload时期进行 读取本地储存
      },
      
      // 删除 历史记录
      cleanHistory(){
        this.historyList = []
        uni.setStorageSync('HISTORY','[]')
      },
      
      // 跳转到 商品详情页
      gotoDetail(item){
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        })
      },
      
      // 跳转到 商品列表页面
      gotoGoodsList(item){
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query='+item
        })
      }
    }
	}
</script>

<style lang="scss">
.suggestion-list {
  padding: 0 5px;
  .suggestion-item {
    display: flex;
    align-items: center; // 垂直对齐
    justify-content: space-between; // 水平方向上 space-between 布局
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
    .goods-name {
      white-space: nowrap; // 文字单行显示不允许换行
      overflow: hidden; // 溢出隐藏
      text-overflow: ellipsis; // 文本溢出后，使用 ... 代替
      font-size: 12px;
    }
  }
}
.history-box{
  padding: 0px 8px;
  .history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #efefef;
    height: 40px;
  }
  .history-list {
    display: flex;
    flex-wrap: wrap; // 让弹性盒元素一行放不下就换行：
    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}
</style>
